<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
      @submit.native.prevent
    >
      <el-form-item label="名称/账号" prop="keyWord">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请输入人员名称或手机号"
          maxlength="11"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['vehicle:car:edit']"
        >
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['vehicle:car:export']"
        >
          导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table
      v-loading="loading"
      :data="dataList"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="#" type="index" width="55" align="center">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆照片" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.vehicleImgUrl">
            <el-image
              :src="baseUrl + scope.row.vehicleImgUrl"
              :preview-src-list="[baseUrl + scope.row.vehicleImgUrl]"
              style="width: 100px; height: 50px"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="车牌号" align="center" prop="vehicleNumber" width="120" />
      <el-table-column label="品牌" align="center" prop="vehicleBrand" width="120" />
      <el-table-column label="用户名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.realName || scope.row.nickName || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" prop="userName" />
      <el-table-column label="用户类型" align="center" width="120">
        <template slot-scope="scope">
          <el-tag
            :type="
              scope.row.memberType == 1
                ? 'success'
                : scope.row.memberType == 2
                ? 'warning'
                : 'info'
            "
            effect="plain"
          >
            {{
              scope.row.memberType == 1
                ? "充电/停车"
                : scope.row.memberType == 2
                ? "停车"
                : "临时用户"
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="充电卡号" align="center" prop="cardNo" />
      <el-table-column
        label="充电类型"
        align="center"
        prop="vehicleChargeTypeValue"
        width="120"
      />
      <el-table-column
        label="非充电类型"
        align="center"
        prop="vehicleNonChargeTypeValue"
        width="120"
      />
      <el-table-column label="用户类型" align="center" width="120">
        <template slot-scope="scope">
          <el-tag
            :type="
              scope.row.vipType == 1
                ? 'warning'
                : scope.row.vipType == 2
                ? 'danger'
                : scope.row.vipType == 3
                ? 'success'
                : 'info'
            "
            effect="plain"
          >
            {{
              scope.row.vipType == 1
                ? "月卡会员"
                : scope.row.vipType == 2
                ? "季卡会员"
                : scope.row.vipType == 3
                ? "年卡会员"
                : "非会员"
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="停车点位" align="center" prop="areaName" />
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['vehicle:car:edit']"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="修改车辆信息" :visible.sync="carShow" width="500px">
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="车辆照片" prop="vehicleImgUrl">
            <el-upload
              ref="upload"
              :multiple="false"
              accept=".png, .jpg, .jpeg, .bmp"
              :action="uploadFileUrl"
              :headers="headers"
              :show-file-list="false"
              :before-upload="handleBeforeUpload"
              :on-success="
                (res) => {
                  onSuccess(res, 'vehicleImgUrl');
                }
              "
            >
              <img
                v-if="form.vehicleImgUrl"
                :src="baseUrl + form.vehicleImgUrl"
                style="width: 100px; height: 70px"
              />
              <el-button v-else type="primary">上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="车辆品牌" prop="vehicleBrand">
            <el-input v-model="form.vehicleBrand" placeholder="请输入车辆品牌"></el-input>
          </el-form-item>
          <el-form-item label="车牌号" prop="vehicleNumber">
            <el-input v-model="form.vehicleNumber" placeholder="请输入车牌号"></el-input>
          </el-form-item>
          <el-form-item label="充电类型" prop="vehicleChargeTypeId">
            <el-select v-model="form.vehicleChargeTypeId" style="width: 100%">
              <el-option
                v-for="(i, k) in chargeTypeList"
                :key="k"
                :label="i.typeValue"
                :value="i.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="非充电类型" prop="vehicleNonChargeTypeId">
            <el-select v-model="form.vehicleNonChargeTypeId" style="width: 100%">
              <el-option
                v-for="(i, k) in nonChargeTypeList"
                :key="k"
                :label="i.typeValue"
                :value="i.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="carShow = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listVehicle, updateVehicle } from "@/api/weiriya/vehicle";
import { listChargeType } from "@/api/weiriya/chargeType";
import { listNonChargeType } from "@/api/weiriya/nonChargeType";
import { getToken } from "@/utils/auth";
export default {
  name: "ChargeRecord",
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      loading: false, // 遮罩层
      single: true, // 非单个禁用
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      dataList: [], // 车辆列表
      // 查询参数
      queryParams: {
        keyWord: null, // 关键字
        pageNum: 1,
        pageSize: 10,
      },
      carShow: false, // 是否显示弹出层
      form: {}, // 表单参数
      rules: {
        vehicleChargeTypeId: [
          { required: true, message: "充电类型不能为空", trigger: "blur" },
        ],
        vehicleNonChargeTypeId: [
          { required: true, message: "非充电类型不能为空", trigger: "blur" },
        ],
      }, // 表单校验
      chargeTypeList: [], // 充电类型列表
      nonChargeTypeList: [], // 非充电类型列表
    };
  },
  created() {
    this.getList();
    this.getChargeTypeList();
    this.getNonChargeTypeList();
  },
  methods: {
    // 查询车辆列表
    getList() {
      this.loading = true;
      listVehicle(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 查询充电类型列表
    getChargeTypeList() {
      let data = {
        pageNum: 1,
        pageSize: 1000,
      };
      listChargeType(data).then((res) => {
        this.chargeTypeList = res.rows;
      });
    },
    // 查询非充电类型列表
    getNonChargeTypeList() {
      let data = {
        pageNum: 1,
        pageSize: 1000,
      };
      listNonChargeType(data).then((res) => {
        this.nonChargeTypeList = res.rows;
      });
    },
    // 上传成功回调
    onSuccess(res, field) {
      this.form[field] = res.fileName;
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      let typeList = ["png", "jpg", "jpeg", "bmp"];
      const fileName = file.name.split(".");
      const fileExt = fileName[fileName.length - 1];
      console.log(fileExt);
      if (!typeList.some((i) => i == fileExt)) {
        console.log("文件格式不正确");
        this.$modal.msgError("文件格式不正确");
        return false;
      }
      return true;
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.single = selection.length !== 1;
      if (selection.length == 1) {
        this.form = selection[0];
      } else {
        this.form = {};
      }
    },
    // 修改
    handleUpdate(row) {
      if (row.id) {
        this.form = Object.assign({}, row);
      }
      this.carShow = true;
    },
    // 提交表单
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateVehicle(this.form).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("修改成功");
              this.carShow = false;
              this.form = {};
              this.getList();
            }
          });
        }
      });
    },
    // 导出
    handleExport() {
      this.download(
        "weiriya/vehicle/export",
        {
          ...this.queryParams,
        },
        `chargeRecord_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
